<!doctype html>
<html>
    <head>
        <meta charset="utf-8">      
        <title>SmartCameraViewer 20 FPS</title>
    </head>
	<style>
		img {max-width: 200%; zoom: 57%; max-height: 200%; transform: rotate(0deg);}
	</style>
    <body>
		<!-- Get the initial image. -->					<!--	IP Camera -->
		<img id="frame" class="shrinkToFit" src="http://10.10.10.100:8080/jpg?q=50">

		<script>        
			// Use an off-screen image to load the next frame.
			var img = new Image();

			// When it is loaded...
			img.addEventListener("load", function() {

				// Set the on-screen image to the same source. This should be instant because
				// it is already loaded.
				document.getElementById("frame").src = img.src;

				// Schedule loading the next frame.
				setTimeout(function() {
					img.src = "http://10.10.10.100:8080/jpg?q=50+" + (new Date).getTime();
				}, 1000/20); // 20 FPS (more or less)
			})
			
			// on error...
			img.addEventListener("error", function() {

				// Set the on-screen image to the same source. This should be instant because
				// it is already loaded.
				document.getElementById("frame").src = img.src;

				// Schedule loading the next frame.
				setTimeout(function() {
					img.src = "http://10.10.10.100:8080/jpg?q=50+" + (new Date).getTime();
				}, 1000/20); // 20 FPS (more or less)
			})

			// Start the loading process.
			img.src = "http://10.10.10.100:8080/jpg?q=50+" + (new Date).getTime();
		</script>
    </body>
</html>